<template>
<!-- from表单中,输入标题, 日期,提交, 添加 -->
  <div>
    <h1 v-if="flag">编辑 {{ this.value }}</h1>
    <h1 v-else >添加</h1>
    <form @submit.prevent="submit" ref="myForm">
      <input ref="title" type="text" v-model="value" placeholder="请输入标题" />
      <input ref="date" type="date" v-model="date" />
      <button  class="btn-submit" @click="sub">提交</button>
      <button class="btn-add" @click="add">添加</button>
    </form>
    <!-- 使用原生table实现列表展示, 标题, 日期, 操作 -->
    <div class="container" style="height:200px;overflow-y: auto;">
    <table class="table">
      <thead>
        <tr>
          <th>标题</th>
          <th>日期</th>
          <th>操作</th>
        </tr>
      </thead>
      
      <tbody v-for="( item,index) in list" :key="item.id" class="scroll">
        <tr>
          <td>{{item.value}}</td>
          <td>{{item.date}}</td>
          <td>
            <button class="btn-edit" @click="edit(index)">编辑</button>
            <button class="btn-del" @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  </div>
  
  
</template>

<script>

export default {
  components: {
    
  },
  props: {},
  data() {
    return {
      list: [
        {
          value: '标题',
          date: '2021-01-01',
        }
      ],
      flag : false,
      id: '',
      value: '',
      date: ''
    }
  },
  watch: {},
  computed: {},
  created() {
    // 刷新页面后,将数据存储到本地
    if (localStorage.getItem('list')) {
      this.list = JSON.parse(localStorage.getItem('list'))
    }
    // 一进入页面,将数据渲染到页面中
    window.onbeforeunload = () => {
      localStorage.setItem('list', JSON.stringify(this.list))
    }
  },
  mounted() {},
  methods: {
    sub () {
      console.log('提交')
    //  实现提交后,将输入框中的值添加到列表中 
   if(this.flag){
     this.list[this.id].value = this.$refs.title.value
     this.list[this.id].date = this.$refs.date.value
    
    }
    // 非空判断
    else if(this.$refs.title.value === '' || this.$refs.date.value === ''){
      alert('请输入标题或日期')}
     else{
      this.list.push({
        value: this.$refs.title.value,
        date: this.$refs.date.value,
        
      })
     }
    //  点击提交后, 更新数据
    this.value = ''
    this.date = ''
    //  this.$refs.myForm.reset()
    },
    add () {
      console.log('添加')
    
    // 点击添加后,将表单的内容清空
    this.value = ''
    this.date = ''
    this.flag = false
  },
  // 点击编辑
  edit (index) {
    this.flag = true
    console.log('编辑')
    // 点击编辑后,通过findIndex方法,找到当前行的索引
    const i = this.list.findIndex(item => item.id === this.list[index].id)
    console.log(i)
    // 点击编辑后,将当前行的数据,填充到表单中
    this.$refs.title.value = this.list[index].value
    this.$refs.date.value = this.list[index].date
    this.id= index
  } ,
  // 点击删除,将当前行删除
  del (index) {
    this.list.splice(index, 1)
  }
 }
}
</script>
<style lang="scss" scoped>
/* 给table添加样式 */
.table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
  text-align: center;
  margin-top: 20px;
  th {
    border: 1px solid #ccc;
    padding: 10px;
  }
  td {
    border: 1px solid #ccc;
    padding: 10px;
  }
}
</style>